<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :show="show" @click-show="show = !show" :fixed="true" :back="true" color="#fff" title="统计分析"></uni-navbar></view>

		<u-mask :show="show" :zoom="false" @click="show = false">
			<view class="filter-box" @click.stop>
				<view class="form-box">
					<u-form ref="uForm">
						<u-form-item class="form-item" label="开始时间" labelAlign="left" label-width="190">
							<date-time-picker placeholder="请选择开始时间" :defaultValue="startTime" :old="true" fields="day" @change="timeChange($event, 'startTime')"></date-time-picker>
						</u-form-item>
						<u-form-item class="form-item" label="结束时间" labelAlign="left" label-width="190">
							<date-time-picker placeholder="请选择结束时间" :defaultValue="endTime" :old="true" fields="day" @change="timeChange($event, 'endTime')"></date-time-picker>
						</u-form-item>
					</u-form>
				</view>
				<view class="fiexd-btm">
					<view class="flex-box">
						<u-button class="form-btn" type="default" @click="resert">清除</u-button>
						<u-button class="form-btn" type="primary" @click="filter">确定</u-button>
					</view>
				</view>
			</view>
		</u-mask>

		<u-sticky><u-tabs class="uTabs" :list="tabsList" barWidth="80" fontSize="32" v-model="tabsCurrent" @change="tabsChange"></u-tabs></u-sticky>
		
		<view class="mView">
			<view class="mViewLeft">
				<view class="mViewItem">
					本年
				</view>
			</view>
			<view class="mViewCenter">
				<view class="mViewItem">
					本月
				</view>
			</view>
			<view class="mViewBottom">
<!-- 				<view class="mViewBottomLeft">
					<image src="../../../static/sx.png" mode=""></image>
				</view>
				
				<view class="mViewBottomRight">
					筛选
				</view> -->
			</view>
			
			
		</view>
		
		
		<view class="com-h2"><view class="span" style="padding-left: 15upx;border-left: 10upx solid #D0021B;">议题总数:20</view></view>

		<view class="table-box" v-if="tabsCurrent == 0">
			<u-table class="table-inner" border-color="#F8F8F8" :key="tabsCurrent" :fontSize="28" padding="10rpx 10rpx">
				<u-tr>
					<u-th class="ishh" style="flex: 0 0 150rpx">议题来源</u-th>
					<u-th class="ishh">议题总数</u-th>
					<u-th class="ishh" style="flex: 0 0 200rpx">占全部议题%</u-th>
				</u-tr>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="table-cell" v-for="(item, index) of 5" :key="index">
						<u-tr>
							<u-td style="flex: 0 0 150rpx">{{ 123123 }}</u-td>
							<u-td>
								<view @click="clickChange(item)">{{ 1123123 }}</view>
							</u-td>
							<u-td style="flex: 0 0 200rpx">
								<text class="clamp">{{ 123123 }}</text>
							</u-td>
						</u-tr>
					</view>
				</scroll-view>
			</u-table>
		</view>

		<view class="table-box" v-if="tabsCurrent == 1">
			<u-table class="table-inner" border-color="#F8F8F8" :key="tabsCurrent" :fontSize="28" padding="10rpx 10rpx">
				<u-tr>
					<u-th class="ishh" style="flex: 0 0 150rpx">议题分类</u-th>
					<u-th class="ishh">议题总数</u-th>
					<u-th class="ishh" style="flex: 0 0 200rpx">占全部议题%</u-th>
				</u-tr>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="table-cell" v-for="(item, index) of 5" :key="index">
						<u-tr>
							<u-td style="flex: 0 0 150rpx">{{ 123123 }}</u-td>
							<u-td>
								<view @click="clickChange(item)">{{ 1123123 }}</view>
							</u-td>
							<u-td style="flex: 0 0 200rpx">
								<text class="clamp">{{ 123123 }}</text>
							</u-td>
						</u-tr>
					</view>
				</scroll-view>
			</u-table>
		</view>

		<view class="table-box" v-if="tabsCurrent == 2">
			<u-table class="table-inner" border-color="#ffffff" :key="tabsCurrent" :fontSize="28" padding="10rpx 10rpx">
				<u-tr>
					<u-th class="ishh" style="flex: 0 0 150rpx">议题状态</u-th>
					<u-th class="ishh">议题总数</u-th>
					<u-th class="ishh" style="flex: 0 0 200rpx">占全部议题%</u-th>
				</u-tr>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="table-cell" v-for="(item, index) of 5" :key="index">
						<u-tr>
							<u-td style="flex: 0 0 150rpx">{{ 123123 }}</u-td>
							<u-td>
								<view @click="clickChange(item)">{{ 1123123 }}</view>
							</u-td>
							<u-td style="flex: 0 0 200rpx">
								<text class="clamp">{{ 123123 }}</text>
							</u-td>
						</u-tr>
					</view>
				</scroll-view>
			</u-table>
		</view>

		<view class="table-box" v-if="tabsCurrent == 3">
			<u-table class="table-inner" border-color="#F8F8F8" :key="tabsCurrent" :fontSize="28" padding="10rpx 10rpx">
				<u-tr>
					<u-th class="ishh" style="flex: 0 0 150rpx">代表之家</u-th>
					<u-th class="ishh">议题总数</u-th>
					<u-th class="ishh" style="flex: 0 0 200rpx">点赞数</u-th>
					<u-th class="ishh" style="flex: 0 0 200rpx">评论数</u-th>
				</u-tr>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="table-cell" v-for="(item, index) of 5" :key="index">
						<u-tr>
							<u-td style="flex: 0 0 150rpx">{{ 123123 }}</u-td>
							<u-td>
								<view @click="clickChange(item)">{{ 1123123 }}</view>
							</u-td>
							<u-td style="flex: 0 0 200rpx">
								<text class="clamp">{{ 123123 }}</text>
							</u-td>
							<u-td style="flex: 0 0 200rpx">
								<text class="clamp">{{ 123123 }}</text>
							</u-td>
						</u-tr>
					</view>
				</scroll-view>
			</u-table>
		</view>

		<!-- <view class="table-box" v-if="tabsCurrent == 4">
			<u-table class="table-inner" border-color="#F8F8F8" :key="tabsCurrent" :fontSize="28" padding="10rpx 10rpx">
				<u-tr>
					<u-th style="flex: 0 0 150rpx">排名</u-th>
					<u-th>名称</u-th>
					<u-th style="flex: 0 0 150rpx">数量</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList" :key="index">
					<u-tr>
						<u-td style="flex: 0 0 150rpx">{{ item.rank }}</u-td>
						<u-td>
							<view @click="clickChange(item)">{{ item.areaName }}</view>
						</u-td>
						<u-td style="flex: 0 0 150rpx">
							<text class="clamp">{{ item.num }}</text>
						</u-td>
					</u-tr>
				</view>
			</u-table>
		</view> -->

		<!-- <view class="table-box" v-if="tabsCurrent == 5">
			<u-table class="table-inner" border-color="#F8F8F8" :key="tabsCurrent" :fontSize="28" padding="10rpx 10rpx">
				<u-tr>
					<u-th style="flex: 0 0 150rpx">排名</u-th>
					<u-th>姓名</u-th>
					<u-th style="flex: 0 0 210rpx">参加活动数量</u-th>
				</u-tr>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="table-cell" v-for="(item, index) of statisticsList" :key="index">
						<u-tr>
							<u-td style="flex: 0 0 150rpx">{{ item.rank }}</u-td>
							<u-td>{{ item.fvName }}</u-td>
							<u-td style="flex: 0 0 210rpx">
								<text class="clamp">{{ item.num }}</text>
							</u-td>
						</u-tr>
					</view>
				</scroll-view>
			</u-table>
		</view> -->

		<!-- <u-loadmore :status="loading" /> -->
		<!-- <u-back-top :scroll-top="scrollTop" top="200"></u-back-top> -->

		<!-- <block v-if="!!statisticsList.length">
			<view class="com-h2" v-if="[0, 1].includes(tabsCurrent)">
				<view class="span"><text :class="{ active: showCanvas == 0 }" @click="tapChange(0)">按类别统计</text></view>
				<view class="span"><text :class="{ active: showCanvas == 1 }" @click="tapChange(1)">按来源统计</text></view>
			</view>
			<view class="canvas-box" v-if="[0, 1].includes(tabsCurrent)" v-show="showCanvas == 0">
				<uni-charts id="chartData2" type="column" canvasId="chartData2" :chartData="chartData2" :key="chartData2.key"></uni-charts>
			</view>
			<view class="canvas-box" v-if="[0, 1].includes(tabsCurrent)" v-show="showCanvas == 1">
				<uni-charts id="chartData1" type="pie" canvasId="chartData1" :chartData="chartData1" :key="chartData1.key"></uni-charts>
			</view>

			<view class="com-h2" v-if="[5].includes(tabsCurrent)">
				<view class="span"><text>按类别统计</text></view>
			</view>
			<view class="canvas-box" v-if="[5].includes(tabsCurrent)">
				<uni-charts id="chartData2" type="column" canvasId="chartData2" :chartData="chartData2" :key="chartData2.key"></uni-charts>
			</view>
		</block> -->
	</view>
</template>

<script>
import uniCharts from '@/components/uni-charts/uni-charts.vue';
import dateTimePicker from '@/components/uni-datetime-picker';
import { mapState } from 'vuex';
export default {
	components: {
		uniCharts,
		dateTimePicker
	},
	data() {
		return {
			scrollTop: 0,
			scrollView: 0,
			show: false,
			showCanvas: 0,
			scroll: false,
			tabsCurrent: 0,
			tabsList: [
				{
					name: '议题来源统计',
					value: 0
				},
				{
					name: '议题分类统计',
					value: 1
				},
				{
					name: '议题状态统计',
					value: 2
				},
				{
					name: '代表之家议题统计',
					value: 3
				}
			],
			statisticsList: [],

			chartData1: {
				key: 1,
				src: '',
				series: [
					{
						data: []
					}
				]
			},
			chartData2: {
				key: 1,
				src: '',
				categories: [],
				series: [
					{
						name: '议题数量',
						data: []
					}
				]
			},

			startTime: '',
			endTime: '',
			loading: 'loadmore'
		};
	},
	onLoad() {
		// this.loadLogin();
		// this.loadData();
	},
	onReachBottom() {
		// if (this.loading == 'loadmore') this.loadData('add');
	},
	onPageScroll(res) {
		// this.scrollTop = res.scrollTop;
	},
	computed: {},
	methods: {
		tabsChange(e){
			this.tabsCurrent = e
		}
	}
};
</script>

<style lang="less" scoped>
.com-h2 {
	border: 0;
	// font-weight: bold;

	.span {
		width: 50%;
	}

	text {
		margin-right: 20rpx;
		color: #333;

		&.active {
			font-weight: bold;
			color: #3396fb;
		}
	}
}

.scroll-Y {
	max-height: 700rpx;
}

uni-canvas {
	width: 690upx;
	height: 500upx;
}

.table-box {
	clear: both;

	.table-inner {
		/deep/ .u-th {
			background-color: #fff;
		}
	}

	.name {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;

		text {
			color: #333;
			width: 260rpx;
			text-align: left;
		}
	}

	text {
		// color: #0196fa;
	}

	.break-all {
		word-break: break-all;
	}

	image {
		margin-right: 20rpx;
		width: 80rpx;
		height: 80rpx;
	}
}

.canvas-inner {
	position: relative;
	height: 400rpx;
}

.canvas-box {
	position: relative;
	width: 100%;
	height: 400rpx;
}

#chartData2 {
	display: block;
	width: 100%;
	height: 400rpx;
}

#chartData1 {
	display: block;
	width: 100%;
	height: 400rpx;
}

.form-box {
	.form-item {
		display: block;
		padding: 0 30rpx;
		border-bottom: 20rpx solid #f5f7fa;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}

 .u-td{
	border: 0 !important;
}


.mView{
	display: flex;
	align-items: center;
	line-height: 108upx;
	padding: 20upx;
	background-color: #FFFFFF;
	.mViewLeft{
		flex: 1;
		text-align: center;
	}
	
	.mViewCenter{
		flex: 1;
		padding-left: 20upx;
		text-align: center;
	}
	
	.mViewBottom{
		flex: 5;
		height: 70upx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.mViewBottomLeft{
			image{
				width: 26upx;
				height: 30upx;
			}
		}
		
		.mViewBottomRight{
			color: #666666;
			font-size: 14px;
			padding-left: 20upx;
		}
	}
	
	.mViewItem{
		width: 120upx;
		height: 70upx;
		line-height: 70upx;
		font-size: 14px;
		background-color: #F9F9F9;
		color: #666666;
		border-radius: 15upx;
	}
	
	.enmViewItem{
		font-size: 14px;
		background-color: #CE2D2C;
		padding: 10upx 20upx;
		color: #ffffff;
		border-radius: 15upx;
	}
}

.ishh{
	background-color: #F6F7FB !important;
}
</style>
